Skip to content

refactor: migrate codebase to TanStack Router#25

Open
chiptus wants to merge 26 commits intomainfrom
claude/migrate-tanstack-router-015h5PFMhsh3FgDeb2uEpKgX
Open

refactor: migrate codebase to TanStack Router#25
chiptus wants to merge 26 commits intomainfrom
claude/migrate-tanstack-router-015h5PFMhsh3FgDeb2uEpKgX

Conversation

@chiptus
Copy link
Copy Markdown
Owner

@chiptus chiptus commented Nov 20, 2025

No description provided.

@vercel
Copy link
Copy Markdown

vercel bot commented Nov 20, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
upline Ready Ready Preview, Comment Apr 4, 2026 7:18am

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR migrates the application from React Router v6 to TanStack Router v1.136.18. The migration introduces file-based routing and replaces React Router's navigation APIs with TanStack Router equivalents throughout the codebase.

Key changes:

  • Replaced React Router with TanStack Router in dependencies and configuration
  • Created file-based route definitions in src/routes/ directory with auto-generated route tree
  • Updated all navigation hooks, Link components, and routing utilities to use TanStack Router APIs

Reviewed Changes

Copilot reviewed 81 out of 82 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
package.json Removed react-router-dom, added @tanstack/react-router and related tooling
vite.config.ts Added TanStackRouterVite plugin for route generation
src/main.tsx Replaced App component with RouterProvider and router instance
src/routes/__root.tsx Root route component containing app providers and layout
src/routeTree.gen.ts Auto-generated route tree (769 lines)
src/hooks/useUrlState.ts Updated from useSearchParams to TanStack Router's useSearch/useNavigate
src/contexts/FestivalEditionContext.tsx Replaced matchPath with regex matching, Navigate with programmatic navigation
Multiple page/component files Updated Link imports and navigate() calls to TanStack Router API
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)

src/pages/EditionView/TabNavigation/MobileTabButton.tsx:1

  • The TanStack Router Link component doesn't support render props with isActive. The code references {({ isActive }) => (...)} but Link's activeProps/inactiveProps pattern doesn't expose isActive to children. This will cause a runtime error. Remove the render prop function and apply active styles through activeProps/inactiveProps className only.
import { Link } from "@tanstack/react-router";

variant="outline"
size={isMobile ? "sm" : "default"}
onClick={() => navigate(-1)}
onClick={() => window.history.back()}
Copy link

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using window.history.back() bypasses TanStack Router's navigation system. TanStack Router provides a router.history.back() method that integrates better with the router's state management. Consider using the router instance for navigation instead of direct browser history API.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

Copilot reviewed 81 out of 82 changed files in this pull request and generated 6 comments.

Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 82 out of 83 changed files in this pull request and generated 9 comments.

Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

Comment on lines +22 to +26
return {
...context,
festivalSlug: params.festivalSlug,
editionSlug: params.editionSlug,
} as EditionRouteContext;
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The route's beforeLoad returns context data (festivalSlug, editionSlug) but this context needs to be properly used. The child routes (StageManagement, SetManagement) expect to receive edition data, not just the slugs. Consider fetching the edition data here and including it in the context, or ensure that the FestivalEdition component properly provides this data to child routes.

Copilot uses AI. Check for mistakes.
@@ -14,7 +14,7 @@ interface SetManagementProps {}

export function SetManagement(_props: SetManagementProps) {
// All hooks must be at the top level
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove comment

claude added 6 commits March 31, 2026 16:39
- Replace all react-router-dom imports with @tanstack/react-router
- Update useNavigate() calls to use object syntax with `to` and `params`
- Replace useSearchParams with useSearch hook
- Replace matchPath with regex-based URL parsing
- Replace Navigate component with imperative navigate() calls
- Update useTimelineUrlState to use TanStack Router's search params API
- Replace navigate(-1) with window.history.back()
- Keep NavLink usage (TanStack Router supports it)
- Keep useOutletContext usage (TanStack Router supports it)

All navigation and routing functionality now uses TanStack Router APIs.
- Replace NavLink with Link using activeProps/inactiveProps
- Replace useOutletContext with useRouteContext
- Remove react-router-dom from dependencies
- Delete old React Router component files
- Update Vite config with TanStack Router plugin
…tion

- Fix search param type errors in useUrlState.ts and useTimelineUrlState.ts by wrapping navigate search callbacks with 'as any' cast
- Fix template literal route types in 10 component files by casting dynamic routes to 'as any'
- Fix CSVImportPage route navigation to use consistent path with both params
- Remove context prop from Outlet in FestivalEdition.tsx as TanStack Router handles context differently
- Fix EditionSelection to use consistent navigation path for subdomain and main domain
- Add type guard for editionSlug parameter in FestivalDetail.tsx handleEditionSelect
- Fix search param navigation by casting to any
- Fix dynamic route template literals with as any casts
- Fix useParams calls with strict: false option
- Fix beforeLoad params access in route files
- Remove unused imports (useNavigate in Navigation.tsx)
- Fix Outlet context prop (removed from component)
- Fix CSV import route paths
- Fix EditionSelection to use correct route structure
- Fix FestivalDetail type guard for editionSlug

All TypeScript errors are now resolved. Build and typecheck pass successfully.
Implemented several improvements to enhance type safety and validation:

- Added centralized Zod schemas for search parameter validation in searchSchemas.ts
- Added NotFound component to router configuration for better error handling
- Implemented proper route context passing for Outlet usage in admin routes
- Replaced many 'as any' casts with type-safe alternatives:
  - Used params object approach for dynamic routes (festival, group, set detail links)
  - Created route mapping for tab navigation with useParams
  - Used relative paths for schedule and explore navigation
  - Retained 'as any' only where necessary for TanStack Router limitations (relative paths, search param updaters)

- Search param handling now uses updater function pattern for proper typing
- All navigation now uses type-safe params objects where applicable
- Build and typecheck pass successfully

Related files:
- Added: src/lib/searchSchemas.ts
- Modified: Navigation components, admin pages, route files
Addressed Copilot PR feedback on navigation type safety:

1. CSVImportPage: Fixed invalid navigation with empty editionId
   - Don't navigate when festival changes and no edition selected
   - Only navigate when both festival and edition are selected
   - Preserves search params when navigating to specific edition

2. FestivalEdition: Improved tab navigation type safety
   - Replaced template string route construction with explicit route paths
   - Uses if/else to ensure each route has proper type inference
   - Added proper param type assertions

Both changes resolve type safety issues while maintaining correct functionality.
TypeCheck and build pass successfully.
@chiptus chiptus force-pushed the claude/migrate-tanstack-router-015h5PFMhsh3FgDeb2uEpKgX branch from 445695c to a2e18a0 Compare March 31, 2026 16:40
Add required arguments to useSearch, useParams, and useRouteContext calls:
- Generic hooks (useUrlState, useTimelineUrlState, useInviteValidation): use { strict: false }
- Page components bound to specific routes: use { from: routePath }
- Shared components (tab buttons, set cards): use { strict: false } with default values
- SetManagement/StageManagement: replace useRouteContext with useParams + query hook
- CSVImportPage: add validateSearch schema to route for tab param
- Remove unused FestivalEdition imports

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 84 out of 85 changed files in this pull request and generated 5 comments.

Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

Comment on lines 108 to 113
function handleFestivalChange(festivalId: string) {
setSelectedFestivalId(festivalId);
setSelectedEditionId("");
navigate(`/admin/festivals/${festivalId}/import`, { replace: true });
// Don't navigate with empty editionId - just update state
// User will select an edition which will then trigger navigation
}
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When a new festival is selected, the component clears selectedEditionId but intentionally does not navigate. This leaves the URL params (/admin/festivals/:festivalId/:editionId/import) pointing at the previous festival/edition, which can be confusing and will be wrong on refresh/share. Consider navigating to the non-param route (/admin/festivals/import) (optionally preserving tab in search) when clearing the edition selection.

Copilot uses AI. Check for mistakes.
Comment on lines 104 to 109
return (
<Link
className="block cursor-pointer max-w-[90vw] w-full"
to={`/festivals/${festival.slug}`}
to="/festivals/$festivalSlug"
params={{ festivalSlug: festival.slug }}
>
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FestivalCard now uses an in-app <Link> to /festivals/$festivalSlug, but the file still has handleFestivalClick() logic that redirects to a festival subdomain when running on the main domain. As-is, user clicks won’t go through that redirect logic (only the single-festival auto-redirect does). If main-domain-to-subdomain routing is still required, wire the card click to handleFestivalClick (or make the link conditional).

Copilot uses AI. Check for mistakes.
festivalSlug = match?.params.festivalSlug || festivalSlug || "";
pathname = pathname.replace(`/festivals/${festivalSlug}`, "");
basePath = `/festivals/${festivalSlug}`;
const festivalMatch = pathname.match(/\/festivals\/([^/]+)/);
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

test sub domains

navigate(
`/admin/festivals/${festivalSlug}/editions/${editionSlug}/${value}`,
);
if (value === "sets") {
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can't we type value as "sets" | "stages".

or can't the tabs be links?

- Navigation.tsx: Use router.history.back() instead of window.history.back()
  to integrate with TanStack Router's navigation system
- CSVImportPage: Simplify tab default to just use search.tab
- EditionLayout: Remove unnecessary EditionLayoutWrapper, use component directly
- SetManagement: Remove empty interface and unused comment
- searchSchemas: Move defaults and proper types to router-level Zod schemas
  - stages/genres: z.array(z.string()) instead of comma-separated strings
  - minRating: z.number() instead of z.string()
  - use24Hour/sortLocked: z.boolean() instead of z.string()
  - All fields use .catch() for defaults at the router level
- useUrlState: Simplified to thin wrapper over useSearch, removed manual
  parsing since router handles defaults and types
- useTimelineUrlState: Split updateState into individual update functions
  (updateView, updateDay, updateTime, updateStages) per review feedback.
  Exposed state properties at top level instead of nested state object.

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
- SetManagement: Use useSetsByEditionQuery instead of useSetsQuery to avoid client-side filtering
- StageManagement: Don't destruct queries, use full query objects
- FestivalSelection: Wire card click to handleFestivalClick for subdomain redirect logic
- useInviteValidation: Accept token as parameter instead of using useSearch internally
- __root: Use useSearch and pass invite token to useInviteValidation hook
- FestivalEdition: Type getCurrentSubTab return value as "sets" | "stages"
- CSVImportPage: Remove comment about not navigating with empty editionId
- .oxlintrc.json: Exclude routeTree.gen.ts from oxlint to allow 'as any' in generated code

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
Following the pattern established in useTimelineUrlState:
- Update useUrlState to accept page parameter ("sets" | "set-detail")
- Build route path internally using template literals with 'as const'
- Use route with both useSearch({ from: route }) and useNavigate({ from: route })
- Remove type assertions - TypeScript properly infers types with this pattern
- Update all callers to pass the page parameter

Updated components:
- ArtistsTab: uses "sets"
- SetDetails: uses "set-detail"
- ListFilters: uses "list" for timeline
- ListSchedule: uses "list" for timeline
- Timeline: uses "timeline" for timeline
- TimelineControls: uses "timeline" for timeline

This eliminates all usages of strict: false and provides proper type safety
without needing @ts-expect-error or type assertions.

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
const subdomainUrl = createFestivalSubdomainUrl(festival.slug);
const isMain = isMainGetuplineDomain();

if (isMain) {
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why don't we use a link?

@chiptus chiptus changed the title Migrate codebase to TanStack Router refactor: migrate codebase to TanStack Router Apr 1, 2026
1. FestivalSelection: Use Link with onClick handler for subdomain redirects
   - Restore Link component for better semantics and accessibility
   - Add onClick handler to intercept clicks on main domain
   - Prevents default and redirects to subdomain when needed
   - Allows normal Link navigation otherwise

2. __root.tsx: Remove strict: false from useSearch
   - Add validateSearch with Zod schema for root route
   - Define invite parameter as optional string
   - Use { from: "__root__" } for type-safe search access
   - Eliminates last usage of strict: false in codebase

All changes maintain existing behavior while improving type safety.

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
1. MobileTabButton: Remove unsupported render prop pattern
   - TanStack Router Link doesn't support {({ isActive }) => ...} pattern
   - Use useMatchRoute() to check if route is active
   - Conditionally style based on isActive state
   - Fixes runtime error with render props

2. FestivalEdition: Remove redundant redirect logic
   - beforeLoad in route already handles redirect to /stages
   - Remove duplicate useEffect that does the same redirect
   - Remove unused useEffect import

These changes fix the Copilot-identified issues while maintaining
existing behavior.

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
1. Edition Route - Implement data preloading in beforeLoad
   - Prefetch edition data using queryClient.ensureQueryData()
   - Makes data available to all child routes without blocking navigation
   - Follows TanStack Router preloading pattern for better UX
   - Reduces duplicate fetches across child components

2. FestivalEdition - Replace Tabs with Links
   - Convert Tabs component to semantic Link navigation
   - Better for accessibility and SEO
   - Proper browser back/forward behavior
   - Styled Links to look like tabs with active states

3. CSVImportPage - Fix navigation on festival change
   - Navigate to /admin/festivals/import when festival changes
   - Preserves tab in search params
   - Prevents stale URL params on page refresh
   - Added validateSearch schema to import route for tab param

All changes maintain existing behavior while following TanStack Router
best practices for preloading and navigation.

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
The set detail route was missing the validateSearch schema, which
caused routing issues. The SetDetails component uses useUrlState()
which expects filterSortSearchSchema parameters (sort, stages, genres,
etc.) to be available.

Without the schema, the route couldn't properly match and the search
parameters weren't typed correctly.

Fixes: Set detail page now loads correctly at /sets/$setSlug

https://claude.ai/code/session_015h5PFMhsh3FgDeb2uEpKgX
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants